<template>
  <div>
    <div style="margin-top: 20px; margin-left: 20px">
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid">
            <div class="grid1">
              <img
                style="width: 50px"
                src="http://121.199.29.84:8888/group1/M00/00/B5/rBD-SWHP9buASG8EAAAGuHJZFao210.svg"
                alt=""
              />
            </div>
            <div class="grid3">总订单数:</div>
            <div class="grid2">{{ nums.order_nums }}</div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid">
            <div class="grid1">
              <img
                style="width: 50px"
                src="http://121.199.29.84:8888/group1/M00/00/B5/rBD-SWHP9laAXNZpAAAHBCCoZTs357.svg"
                alt=""
              />
            </div>
            <div class="grid3">本日新增订单:</div>
            <div class="grid2">{{ this.dayOrderNums }}</div>
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="grid">
            <div class="grid1">
              <img
                style="width: 50px"
                src="http://121.199.29.84:8888/group1/M00/00/B5/rBD-SWHP9vKAVcXoAAACyxCGIUA481.svg"
                alt=""
              />
            </div>
            <div class="grid3">本日销售金额:</div>
            <div class="grid2">{{ total }}元</div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid">
            <div class="grid1">
              <img
                style="width: 50px"
                src="http://121.199.29.84:8888/group1/M00/00/B5/rBD-SWHP93KALUwcAAALtK8glfk705.svg"
                alt=""
              />
            </div>
            <div class="grid3">待支付订单:</div>

            <div class="grid2">{{ nums1.待支付 }}</div>
          </div></el-col
        >
      </el-row>
      <div class="second">
        <div class="from">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>产品总览</span>
              
            </div>
            <div class="text item">
              
              <div class="cardnum"><div class="on">未上架:{{this.lineNums.length}}</div>
              <div class="line">已上架:{{this.onNums.length}}</div>
              <div class="all">产品总量:{{this.onNums.length+this.lineNums.length}}</div></div>
              
            </div>
          </el-card>
        </div>
      </div>
      <!-- <div class="qq"> -->

      <div class="calendar">
        <div id="main"></div>
        <el-calendar class="ca"></el-calendar>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request";
// 引入产品数据Action
import { mapActions, mapMutations, mapState } from "vuex";
import { param } from '@/utils';
export default {
  data() {
    return {
      month: "",
      nums: {},
      nums1: {},
      nums2: {},
      total: 0,
      proName: [],
      proSales: [],
      size: "",
      onNums:[],
      lineNums:[],
      dayOrderNums:0,
    };
  },
  name: "qq",
  created() {},
  methods: {
    // 获取销量数据
    ...mapActions("product", ["getProductDataVuex"]),
    // 获取上架物品及下架物品数量
    getallProductData(){
      let param ={
        page:1,
        pageSize:200
      };
      this.getProductDataVuex(param).then((res)=>{
        res.list.forEach((item)=>{
          if(item.status=='正常'){
            this.onNums.push(item);
          }
          else{
            this.lineNums.push(item);
          }
          console.log(this.onNums.length,'213142----');
        })
      })
    },
    getProductData() {
      let param = {
        page: 1,
        pageSize:7,
      };
      this.getProductDataVuex(param).then((res) => {
        res.list.forEach((item) => {
          this.proName.push(item.name);
          this.proSales.push(item.sales);
          console.log(this.proName);
        });
        var myChart = this.$echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: "产品销量排行",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
          xAxis: {
            data: this.proName,
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: this.proSales,
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
      // console.log(this.proName,'121315');
    },
    // 获取订单数据
    loadNums() {
      let url = "/statistics/nums";
      get(url).then((resp) => {
        this.nums = resp.data;
      });
    },
    loadNums1() {
      let url = "/statistics/orderStatus";
      get(url).then((resp) => {
        this.nums1 = resp.data;
      });
    },
    loadNums2() {
      let url = "/statistics/dayOrder";
      get(url).then((resp) => {
        resp.data.forEach((item) => {
          if(item.num){
          this.total=Number(item.total);
          this.dayOrderNums=item.num;}
        });

        // this.nums2 = resp.data;
      });
    },
  },
  mounted() {
    this.loadNums();
    this.loadNums1();
    this.loadNums2();
    this.getProductData();
    this. getallProductData();
  },
  computed: {
    // Action1.声明辅助函数获取state中的值
    ...mapState("product", ["productData"]),
  },
};
</script>

<style scoped>
.onnums{}
/* 卡片 */
.el-card{
  font-size: 17px;
}
.cardnum{
   /* font-size: 20px; */
  margin-top:10px;
  display: flex;
  /* position: relative; */
}
.on{  
  flex:1;
  font-size: 15px;
  /* position: absolute; */
  /* left:20px */
}
.line{
  flex:1;
  font-size: 15px;
  /* position: absolute;
  left:100px */
}
.all{
  flex:1;
  font-size: 15px;
  /* position: absolute;
  left: 180px; */
}
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 10px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 500px;
  }
/* 表单 */
.second {
  position: relative;
  /* font-size: 100px; */
}
.from {
  /* size: 80px; */
  /* width: 800px; */
  position: absolute;
  top: 20px;
  left:10px;
}
/* 柱状图 */
.element.style {
  background-color: blue;
}
.calendar {
  position: relative;
  /* height: 50px; */
}
#main {
  /* width:200px; */
  position: absolute;
  /* bottom: 100px; */
  width: 650px;
  height: 300px;
  right: 10px;
  top: 210px;
}
.ca /deep/ .el-calendar__body {
  width: 350px;
  /* height: 30px; */
}
.ca /deep/ .el-calendar-day {
  height: 30px;
}
.ca /deep/.el-calendar-table td.is-today {
  background-color: #c23631b4;
  /* color: blueviolet; */
}
.ca /deep/ .el-calendar__header {
  /* height: 30px; */
}
.ca /deep/ .el-calendar-table {
  height: 30px;
}
.ca {
  top: 180px;
  left: 10px;
  position: absolute;
}
.das {
  position: absolute;
  top: 170px;
}
/* 日历 */

/*  */
.grid {
  /* font-size:25px; */
  font-family: sans-serif;
  border: 2px solid #444;
  text-align: center;
  position: relative;
  border-radius: 20px;
  /* background-color: #7232dd; */
  /* color:white; */
  height: 100px;
}
.grid1 {
  position: absolute;
  /* width: 50px; */
  top: 20px;
  left: 20px;
}
.grid2 {
  text-align: center;
  color:#c23531;
  font-size:20px;
  position: absolute;
  top: 50px;
  left: 90px;
}
.grid3 {
  /* font-size:25px; */
  position: absolute;
  top: 25px;
  left: 90px;
}
</style>